<template>
  <s-layout class="set-wrap" title="分类搜索" :bgStyle="{ color: '#FFF' }">
    <view class="ss-p-x-24">
      <view class="ss-flex ss-col-center">
        <uni-search-bar
          class="ss-flex-1"
          radius="33"
          placeholder="请输入分类关键字（日文匹配）"
          cancelButton="none"
          :focus="true"
          @confirm="onSearch($event.value)"
        />
      </view>

	    <!--站点分类-->
	    <s-category-block-panel-one v-if="state.categoryList.length > 0" :category-list="state.categoryList"></s-category-block-panel-one>

    </view>
  </s-layout>
</template>

<script setup>
  import { reactive } from 'vue';
  import sheep from '@/sheep';
  import { onLoad } from '@dcloudio/uni-app';
  const state = reactive({
	  categoryList: [],
  });

  // 搜索
  async function onSearch(keyword) {
		const res = await sheep.$api.category.list({
			name: keyword
		});
	  state.categoryList = res
	  console.log(state.categoryList)
  }

  onLoad(() => {

  });
</script>

<style lang="scss" scoped>
  .serach-title {
    font-size: 30rpx;
    font-weight: 500;
    color: #333333;
  }

  .uni-searchbar {
    padding-left: 0;
  }

  .serach-history {
    font-weight: bold;
    color: #333333;
    font-size: 30rpx;
  }

  .clean-history {
    font-weight: 500;
    color: #999999;
    font-size: 28rpx;
  }

  .history-btn {
    padding: 0 38rpx;
    height: 60rpx;
    background: #f5f6f8;
    border-radius: 30rpx;
    font-size: 28rpx;
    color: #333333;
    max-width: 690rpx;
    margin: 0 20rpx 20rpx 0;
  }
</style>
